<template>
  <view class="XSelect">
    <selectInput :disabled="disabled"
                 :placeholderStyle="placeholderStyle"
                 :label="propsOptions.label"
                 :list="list"
                 :appendToBody="appendToBody"
                 :value="propsOptions.value"
                 :arrowIcon="arrowIcon"
                 :height="height"
                 :rightIconName="rightIconName"
                 :placeholder="placeholder"
                 @clear="clear"
                 @click="handleClick"></selectInput>
    <x-popup  v-model="show"
              :length="length"
              :appendToBody="appendToBody"
              :resetShow="false"
              :closeIconpos="closeIconpos"
              :mode="mode"
              :title="title"
              confirmText="确认"
              @confirm="handleConfirm">
      <picker-view v-if="!multiple" class="pickerView" :value="pickerViewValue" @change="pickerViewChange">
        <picker-view-column>
          <view class="item" v-for="(item,index) in listData" :key="index">{{item[propsOptions.label]}}</view>
        </picker-view-column>
      </picker-view>
      <view v-else>
        <checkbox-group @change="checkboxAllChange">
          <label class="multiple">
            <view class="checkbox">
              <checkbox value="xSelectAll" :checked="allValue"  style="transform:scale(0.8)" />
            </view>
            <view>全选</view>
          </label>
        </checkbox-group>
        <checkbox-group @change="checkboxChange">
          <label class="multiple" v-for="(item, index) in listData" :key="index">
            <view class="checkbox">
              <checkbox :value="item[propsOptions.value]" :checked="item.checked"  style="transform:scale(0.8)" />
            </view>
            <view>{{item[propsOptions.label]}}</view>
          </label>
        </checkbox-group>
      </view>
    </x-popup>
  </view>
</template>

<script>

import SelectInput from './selectInput';
import XPopup from './x-popup';

export default {
  name: 'x-select',
  props: {
    rightIconName: {
      type: String,
      default: 'arrow-down-fill'
    },
    multiple: {
      type: Boolean,
      default: false
    },
    title: {
      type: String,
      default: ''
    },
    mode: {
      type: String,
      default: 'bottom'
    },
    length: {
      type: String,
      default: '50%'
    },
    closeIconpos: {
      type: String,
      default: 'top-right'
    },
    listData: {
      type: Array,
      default: () => []
    },
    disabled: {
      type: Boolean,
      default: false
    },
    value: {
      type: Array,
      default: () => []
    },
    placeholderStyle: {
      type: Object,
      default: () => {
        return {
          fontSize: '32rpx',
          color: '#c0c4cc'
        };
      }
    },
    placeholder: {
      type: String,
      default: '请选择'
    },
    propsOptions: {
      type: Object,
      default: () => {
        return {
          value: 'value',
          label: 'label'
        };
      }
    },
    arrowIcon: {
      type: Object,
      default: () => {
        return {
          color: '#c0c4cc',
          size: 28
        };
      }
    },
    /**
     * 是否插入boyd
     * */
    appendToBody: {
      type: Boolean,
      default: true
    },
    height: {
      type: String,
      default: '70rpx'
    }
  },
  components: {SelectInput, XPopup},
  data() {
    return {
      list: [],
      show: false,
      pickerViewValue: [0],
      detail: [],
      allValue: false
    };
  },
  watch: {
    show(value) {
      if (this.multiple && value) {
        this.allValue = this.value?.length === this.listData?.length;
        this.checkboxValue = this.value;
        this.updateListData();
      }
    },
    value: {
      deep: true,
      immediate: true,
      handler(value) {
        if (this.multiple) {
          this.checkboxValue = value;
          this.updateListData();
        }
        this.list = this.listData.filter(item => {
          return value?.includes(item[this.propsOptions.value]);
        });
      }
    }
  },
  methods: {
    updateListData() {
      this.listData.forEach(item => {
        item.checked = false;
        if (this.checkboxValue?.includes(item[this.propsOptions.value])) {
          item.checked = true;
        }
      });
    },
    handleClick() {
      this.show = true;
      if (!this.multiple) {
        if (this.list.length) {
          this.pickerViewValue = [this.listData.findIndex(item => item[this.propsOptions.value] === this.list[0][this.propsOptions.value])];
        } else {
          this.pickerViewValue = [0];
        }
      }
    },
    pickerViewChange({detail}) {
      this.pickerViewValue = detail.value;
    },
    handleConfirm() {
      if (!this.multiple) {
        this.list = [this.listData[this.pickerViewValue[0]]];
        this.$emit('update:value', this.list.map(item => item[this.propsOptions.value]));
      } else {
        this.list = this.listData.filter(item => {
          return this.checkboxValue.includes(item[this.propsOptions.value]);
        });
        this.checkboxValue = this.list.map(item => item[this.propsOptions.value]);
        this.updateListData();
        this.$emit('update:value', this.checkboxValue);
      }
      this.$emit('change', this.list);
    },
    clear(list) {
      if (!this.multiple) {
        this.list = [];
        this.pickerViewValue = [0];
        this.$emit('clear', list);
        this.$emit('change', this.list);
        this.$emit('update:value', this.list);
      } else {
        this.list = list.filter(item => item[this.propsOptions.value]);
        this.checkboxValue = list.map(item => item[this.propsOptions.value]);
        this.updateListData();
        this.$emit('clear', list);
        this.$emit('change', this.list);
        this.$emit('update:value', this.checkboxValue);
      }
    },
    updateAll(flag) {
      this.listData.forEach(item => {
        item.checked = flag;
      });
    },
    checkboxAllChange({detail}) {
      console.log('detail.value', detail.value);
      if (detail.value.length) {
        this.allValue = true;
        this.checkboxValue = this.listData.map(item => item[this.propsOptions.value]);
      } else {
        this.allValue = false;
        this.checkboxValue = [];
      }
      console.log('this.allValue', this.allValue);
      this.updateAll(this.allValue);
    },
    checkboxChange({detail}) {
      this.checkboxValue = detail.value;
      this.allValue = this.listData?.length === detail.value?.length;
      this.updateListData();
      // this.$emit('change', this.listData[this.pickerViewValue[0]]);
    }
  }
};
</script>

<style scoped lang="scss">
.XSelect{
  width: 100%;

  .pickerView{
    width: 100%;
    height: 100%;
    text-align: center;
  }

  .multiple {
    display: flex;

    .checkbox{
      margin-right: 20rpx;
    }
  }
}
</style>
